

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>CSS笔记-2 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="CSS笔记-2">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-09-05 11:15" pubdate>
        2021年9月5日 上午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      3.4k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      43
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">CSS笔记-2</h1>
            
            <div class="markdown-body">
              <h1 id="前端基础-CSS-2"><a href="#前端基础-CSS-2" class="headerlink" title="前端基础-CSS-2"></a>前端基础-CSS-2</h1><h2 id="1-精灵图-雪碧图"><a href="#1-精灵图-雪碧图" class="headerlink" title="1.精灵图(雪碧图)"></a>1.精灵图(雪碧图)</h2><hr>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.box1</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">50px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="css">            <span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">url</span>(<span class="hljs-string">&quot;img/雪碧图.jpg&quot;</span>);</span><br><span class="css">            <span class="hljs-attribute">background-position</span>: <span class="hljs-number">50px</span> <span class="hljs-number">50px</span>;</span><br><span class="css">        &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>  	<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>现在用得更多的是<code>iconfont</code></p>
<h2 id="2-定位"><a href="#2-定位" class="headerlink" title="2.定位"></a>2.定位</h2><p>设置定位后会多出五个属性：<code>left,top,right,bottom,z-index</code></p>
<pre><code class=" mermaid">graph TD
A[布局]
A--&gt;B[流式布局]
B--&gt;B1[标准流]
B--&gt;B2[脱流]
B1--&gt;B11[盒子模型]
B1--&gt;B12[元素类型]
B2--&gt;B21[浮动]
B2--&gt;B22[定位]
A--&gt;C[弹性布局]
A--&gt;D[响应式布局]
A--&gt;E[自适应布局]

</code></pre>



<h3 id="2-1相对定位"><a href="#2-1相对定位" class="headerlink" title="2.1相对定位"></a>2.1相对定位</h3><ol>
<li>相对于<strong>自己原来的位置</strong>进行定位</li>
<li>相对定位默认会高于标准文档流一个Z轴层级，但是可以通过<code>z-index</code>去调整</li>
<li>相对定位即使位置发生了偏移，仍然占用原来的位置。</li>
<li><strong>没有脱流</strong></li>
</ol>
<blockquote>
<p><strong>浮动不可以调文档流层级，只有定位可以。</strong></p>
</blockquote>
<h4 id="2-1-1相对定位的优点"><a href="#2-1-1相对定位的优点" class="headerlink" title="2.1.1相对定位的优点"></a>2.1.1相对定位的优点</h4><ol>
<li>弥补了行内元素不能设置上面位置的缺点(行内元素的<code>margin-top/margin-bottom</code>不能使用)</li>
<li>配合绝对定位，<strong>父相子绝</strong></li>
</ol>
<h3 id="2-2绝对定位"><a href="#2-2绝对定位" class="headerlink" title="2.2绝对定位"></a>2.2绝对定位</h3><ol>
<li>绝对定位脱流（<strong>在当前位置脱流</strong>，如果不设置left、bottom等仍然在原位置）</li>
<li>绝对定位默认是以页面为标准再进行定位，它会随着浏览器的滚动而进行位置变化 </li>
<li>绝对定位在进行位置设置的时候，如果发现外层有相对定位，则以这个相对定位的元素为标准来进行定位</li>
</ol>
<blockquote>
<p>注意：绝对定位并不是绝对的，它是默认找页面的<code>body</code>标签进行定位的，如果有父容器的话从内往外找，<code>position:relative,absolute,fixed(除了static)</code>都可以阻拦，并以这个容器为定位标准。</p>
</blockquote>
<h3 id="！！！重点：子绝父相"><a href="#！！！重点：子绝父相" class="headerlink" title="！！！重点：子绝父相"></a>！！！重点：子绝父相</h3><ul>
<li><p>子绝父相是一种布局思路，当一个元素需要另一个元素为标准进行定位的时候，就使用子绝父相</p>
</li>
<li><p>子绝父相的本意是指<strong>当一个子级元素使用了绝对定位以后，父级元素上面要使用相对定位</strong>。这个概念只是一个 比较狭隘的概念 </p>
<blockquote>
<ol>
<li>. 并不是一定要是父级元素，只要是外层元素也可以的【子绝父相的”父“并不是一定要求是父级】 </li>
<li>并不是父级一定要使用相对定位，外层元素的<strong>任何定位</strong>都可以把<strong>绝对定位</strong>给拉回来 </li>
</ol>
</blockquote>
</li>
</ul>
<h3 id="！！！脱流的影响"><a href="#！！！脱流的影响" class="headerlink" title="！！！脱流的影响"></a>！！！脱流的影响</h3><ol>
<li>脱流会造成宽度丢失 </li>
<li><strong>定位脱流除了用<code>left和right</code>来拉开宽度，可以通过<code>top和bottom</code>来拉开高度</strong>【left/right/top/bottom拉开的是<strong>流</strong>的宽度与高度】</li>
<li>脱流以后的元素不占用当前位置，会照成父级的高度坍塌 </li>
<li>脱流以后的元素高于标准文档流的一个Z轴，但是定位脱流可以使用<code>z-index</code>来调整Z轴的层级 </li>
<li>脱流无视元素类型，全部变成<code>block</code>块级的状态 </li>
<li>脱流以后的元素会形成一个BFC，没有<code>margin</code>的穿透与折叠 </li>
<li>脱流以后的元素不适用于之前标准流里面的任何居中规范（如果是定位脱流，可以居中） </li>
</ol>
<h3 id="！！！定位切割"><a href="#！！！定位切割" class="headerlink" title="！！！定位切割"></a>！！！定位切割</h3><ul>
<li>当元素定位(absolute,fixed)脱流后，可以拉开流</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span>&gt;<span class="hljs-selector-class">.box1</span>&#123;<br>       <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>       <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">24</span>, <span class="hljs-number">175</span>, <span class="hljs-number">36</span>);<br>       <span class="hljs-comment">/* 脱流后宽度丢失 */</span><br>       <span class="hljs-attribute">position</span>: absolute;<br>       <span class="hljs-comment">/* 左右拉开流 宽度也会拉开 */</span><br>       <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;<br>       <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;<br>   &#125;<br></code></pre></td></tr></table></figure>



<h3 id="！！！浮动脱流和定位脱流的区别"><a href="#！！！浮动脱流和定位脱流的区别" class="headerlink" title="！！！浮动脱流和定位脱流的区别"></a>！！！浮动脱流和定位脱流的区别</h3><ol>
<li><strong>浮动脱流</strong>要么向左脱流，要么是向右脱流，它们<strong>同时脱流在一个Z轴层级</strong>。<strong>定位脱流</strong>是在当前位置直接脱流，并且每个元素脱流都会形成一个<strong>单独的流</strong>，也就会形成一个单独的Z轴层级。</li>
<li>定位脱流的Z轴层级会默认比浮动脱流的Z轴层级要<strong>高</strong></li>
<li>浮动脱流以后不可以改变脱流的起始位置，但是定位脱流可以通过<code>left/right/top/bottom/z-index</code>来进行调整。</li>
</ol>
<h4 id="定位脱流居中方法"><a href="#定位脱流居中方法" class="headerlink" title="定位脱流居中方法"></a>定位脱流居中方法</h4><ul>
<li>方法一：父容器设置为<code>position:absolute</code>后，再设置宽度为100%，设置容器内的子元素为<code>display:inline-block</code>，设置父容器<code>text-align:center</code>进行居中</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs css">&lt;style&gt;<br>        <span class="hljs-selector-class">.container</span>&#123;<br>            <span class="hljs-attribute">background-color</span>: blanchedalmond;<br>            <span class="hljs-comment">/* 设置绝对定位后宽度丢失，不为100% */</span><br>            <span class="hljs-attribute">position</span>: absolute;<br>            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<br>            <span class="hljs-attribute">text-align</span>: center;<br>        &#125;<br>        <span class="hljs-selector-class">.container</span>&gt;<span class="hljs-selector-class">.box</span>&#123;<br>            <span class="hljs-comment">/* 设置为行内盒子 */</span><br>            <span class="hljs-attribute">display</span>: inline-block;<br>            <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span> <span class="hljs-number">15px</span>;<br>            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid red;<br>        &#125;<br>&lt;/style&gt;<br><br>    &lt;<span class="hljs-selector-tag">div</span> class=&quot;container&quot;&gt;<br>        &lt;<span class="hljs-selector-tag">div</span> class=&quot;box&quot;&gt;<br>            盒子<span class="hljs-number">1</span><br>        &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>        &lt;<span class="hljs-selector-tag">div</span> class=&quot;box&quot;&gt;<br>            盒子<span class="hljs-number">2</span><br>        &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>        &lt;<span class="hljs-selector-tag">div</span> class=&quot;box&quot;&gt;<br>            盒子<span class="hljs-number">3</span><br>        &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>    &lt;/<span class="hljs-selector-tag">div</span>&gt;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/60f0153d5132923bf8acf828.jpg" srcset="/blog/img/loading.gif" lazyload alt="方法一"></p>
<ul>
<li>方法二：父容器宽度为子元素的内容宽度，父容器使用<code>margin:auto</code>居中自身</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">    </span><br><span class="css"><span class="hljs-comment">/* 方法二 */</span></span><br><span class="css">        <span class="hljs-selector-class">.container1</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: blanchedalmond;</span><br><span class="css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">            <span class="hljs-comment">/* 设置后可以拉开元素 拉开的就是流 宽度为100%*/</span></span><br><span class="css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;</span><br><span class="css">            <span class="hljs-comment">/* 更改宽度为内容宽度 */</span></span><br><span class="css">            <span class="hljs-attribute">width</span>: fit-content;</span><br><span class="css">            <span class="hljs-attribute">margin</span>: auto;</span><br><span class="css">        &#125;</span><br><span class="css">		<span class="hljs-comment">/*子容器居中*/</span></span><br><span class="css">        <span class="hljs-selector-class">.container1</span>&gt;<span class="hljs-selector-class">.box1</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span> <span class="hljs-number">15px</span>;</span><br><span class="css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid red;</span><br><span class="css">        &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><br>            盒子1<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><br>            盒子2<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><br>            盒子3<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/60f0195d5132923bf8bf5ba4.jpg" srcset="/blog/img/loading.gif" lazyload alt="居中"></p>
<h3 id="2-3固定定位"><a href="#2-3固定定位" class="headerlink" title="2.3固定定位"></a>2.3固定定位</h3><ol>
<li>固定定位在<strong>当前位置直接脱流</strong></li>
<li>绝对定位一定是以浏览器为标准进行定位，外层任何也不能阻止</li>
<li>固定定位会固定在浏览器指定的位置，不会随着浏览器滚动条的拖动改变外置。</li>
</ol>
<h3 id="2-4静态定位"><a href="#2-4静态定位" class="headerlink" title="2.4静态定位"></a>2.4静态定位</h3><p><code>position:static</code>脱离定位，使元素恢复正常文档流，<code>left,bottom,z-index</code>等失效</p>
<h3 id="2-5粘性定位"><a href="#2-5粘性定位" class="headerlink" title="2.5粘性定位"></a>2.5粘性定位</h3><p>它是CSS3最新出来的一种定位方式，需要用到兼容性<code>position:sticky</code></p>
<ol>
<li>当它的位置让它可以正常呈现的时候，它的定位等同于<code>position: static</code>，随着正常的文档流滚动</li>
<li>当它的位置不足以让它正常显示，但它的父元素有足够多让它显示的空间，它的定位等同于<code>position: fixed</code></li>
<li>当它的父元素的空间不够让它显示，它的定位等同于<code>position:absolute</code>(被其他元素覆盖)</li>
<li><strong>粘性定位不参与其他元素的定位(拉不回子元素)</strong></li>
</ol>
<h3 id="2-6-补充–设置全屏盒子"><a href="#2-6-补充–设置全屏盒子" class="headerlink" title="2.6**!!!补充–设置全屏盒子**"></a>2.6**!!!补充–设置全屏盒子**</h3><ol>
<li><p>方法一：<strong>定位</strong>，左右宽度为100%，可以使用<code>absolute</code>和<code>fixed</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span>&#123;<br>        <span class="hljs-attribute">position</span>: fixed;<br>        <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<br>        <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;<br>    &#125;<br></code></pre></td></tr></table></figure>
</li>
<li><p>方法二：使用自适应宽高，<code>vw</code>和<code>vh</code>来设置</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"> <span class="hljs-selector-class">.container</span>&#123;<br>            <span class="hljs-attribute">position</span>: fixed;<br>            <span class="hljs-attribute">width</span>: <span class="hljs-number">100vw</span>;<br>            <span class="hljs-attribute">height</span>: <span class="hljs-number">100vh</span>;<br>&#125;<br></code></pre></td></tr></table></figure>
</li>
<li><p>方法三：设置<code>body</code>和<code>html</code>的宽度高度为100%</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">html</span>,<span class="hljs-selector-tag">body</span>&#123;<br>         <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<br>         <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;<br>     &#125;<br></code></pre></td></tr></table></figure>
</li>
<li><p>方法四：<strong>禁用方法</strong>！！！去掉HTML5的文档声明</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>去掉<code>HTML5</code>头部声明，这样就代表当前这个网页不是<code>HTML5</code>的标准了，然后默认网页宽高就为100%，就为浏览器高度。<strong>最好不要使用</strong>。</p>
</blockquote>
</li>
</ol>
<hr>
<h2 id="3-CSS计算方法-变量使用"><a href="#3-CSS计算方法-变量使用" class="headerlink" title="3.CSS计算方法,变量使用"></a>3.CSS计算方法,变量使用</h2><h3 id="3-1变量"><a href="#3-1变量" class="headerlink" title="3.1变量"></a>3.1变量</h3><p>变量的英文单词叫<code>variable</code>JavaScript中简写为<code>var</code></p>
<p><strong>定义变量</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css">--primaryColor:orange;<br></code></pre></td></tr></table></figure>

<p><strong>调用变量</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--primaryColor);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>变量有作用域，子级可以使用父级以上定义的变量</p>
</blockquote>
<p>一般可以将全局变量定义到<code>html</code>标签和<code>:root</code>(:root 选择器匹配文档根元素，在HTML中根元素始终是 <code>html</code>元素)上</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 定义在html上为全局变量 */</span><br> <span class="hljs-selector-tag">html</span>&#123;<br>     --primaryColor:orange;<br> &#125;<br><br> <span class="hljs-comment">/* :root的伪元素指的是根元素，而根元素就是html标签 */</span><br> <span class="hljs-selector-pseudo">:root</span>&#123;<br>     --rootColor:blue;<br> &#125;<br></code></pre></td></tr></table></figure>

<h3 id="3-2计算方法"><a href="#3-2计算方法" class="headerlink" title="3.2计算方法"></a>3.2计算方法</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*支持加减乘除四则运算*/</span><br><span class="hljs-attribute">width</span>:<span class="hljs-built_in">calc</span>(<span class="hljs-number">100%</span> - <span class="hljs-number">200px</span>);<br><span class="hljs-attribute">height</span>:<span class="hljs-built_in">calc</span>(<span class="hljs-number">100px</span> * <span class="hljs-number">2</span>);<br><span class="hljs-attribute">width</span>:<span class="hljs-built_in">calc</span>(<span class="hljs-number">100px</span> + <span class="hljs-number">200px</span>);<br><span class="hljs-attribute">height</span>:<span class="hljs-built_in">calc</span>(<span class="hljs-number">100px</span> / <span class="hljs-number">2</span>);<br></code></pre></td></tr></table></figure>

<p><strong>注意：</strong></p>
<ul>
<li><strong>符号左右两边要有空格</strong></li>
<li>先乘除，后加减，有括号先算括号</li>
</ul>
<hr>
<h2 id="4-CSS高级特性"><a href="#4-CSS高级特性" class="headerlink" title="4.CSS高级特性"></a>4.CSS高级特性</h2><pre><code class=" mermaid">graph TD
A[CSS高级特性]
A--&gt;B[继承性]
A--&gt;C[层叠性]
A--&gt;D[优先级]

</code></pre>

<h3 id="4-1继承性"><a href="#4-1继承性" class="headerlink" title="4.1继承性"></a>4.1继承性</h3><blockquote>
<p>继承性主要在继承上面，指内部元素会默认继承外部元素的样式</p>
</blockquote>
<p><strong>继承性主要针对的是某一些属性</strong></p>
<ol>
<li>所有<strong>与布局相关的属性</strong>通通不可继承，如 <code>margin/padding/width/height/position/display/float/box-sizing/z-index</code></li>
<li>典型的某些样式属性也不可继承，如 <code>background-*/border/border-radius </code></li>
<li>能够被继承的样式属性 <code>color/text-*/font-*/visibility/line-height/list-style-*</code></li>
</ol>
<p><strong>主动继承</strong></p>
<p>默认情况下只有上面部分内容会被继承，但是可以使用继承属性值<code>inherit</code>去主动继承父级的属性值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css">属性名:inherit<br></code></pre></td></tr></table></figure>

<blockquote>
<p>基本上所有的CSS属性都会有一个 <code>inherit </code>的属性值</p>
</blockquote>
<h3 id="4-2层叠性"><a href="#4-2层叠性" class="headerlink" title="4.2层叠性"></a>4.2层叠性</h3><p>层叠性的是CSS的样式是经过多个地方组合在一起，像搭建积木一样共同决定的，一个元素主要的CSS样式来 源于以下三层</p>
<p><img src="https://pic.imgdb.cn/item/60f556225132923bf8494810.jpg" srcset="/blog/img/loading.gif" lazyload alt="三层"></p>
<p>由此得出样式优先级：</p>
<blockquote>
<p>自定义样式 &gt; 浏览器的默认样式 &gt; 继承样式</p>
</blockquote>
<p><strong>越往上层，权重越高</strong></p>
<h3 id="4-3优先级"><a href="#4-3优先级" class="headerlink" title="4.3优先级"></a>4.3优先级</h3><p><strong>CSS各种选择器优先级如下</strong></p>
<table>
<thead>
<tr>
<th align="center"><strong>选择器</strong></th>
<th align="center"><strong>权重</strong></th>
</tr>
</thead>
<tbody><tr>
<td align="center">通配符选择器</td>
<td align="center">0(只参与选择不参与权重)</td>
</tr>
<tr>
<td align="center">标签选择器，<em>伪元素选择器</em></td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">class选择器，伪类选择器，<strong>属性选择器</strong></td>
<td align="center">10</td>
</tr>
<tr>
<td align="center">id选择器</td>
<td align="center">100</td>
</tr>
<tr>
<td align="center"><code>style</code>行内样式</td>
<td align="center">1000</td>
</tr>
<tr>
<td align="center"><code>!important</code></td>
<td align="center">10000[无穷大]</td>
</tr>
</tbody></table>
<ul>
<li>当选择器权重相等时，样式冲突，后面的覆盖前面的</li>
<li><strong>选择器权重不进位</strong>（11个1级选择器的权重相加不会超过10级 &lt;=9级）</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs css">&lt;style&gt;<br><span class="hljs-comment">/* 11个div 权重 相加 最多为9 不能超过10 不会进位 */</span><br><span class="hljs-selector-tag">div</span>&gt;<span class="hljs-selector-tag">div</span>&gt;<span class="hljs-selector-tag">div</span>&gt;<span class="hljs-selector-tag">div</span>&gt;<span class="hljs-selector-tag">div</span>&gt;<span class="hljs-selector-tag">div</span>&gt;<span class="hljs-selector-tag">div</span>&gt;<span class="hljs-selector-tag">div</span>&gt;<span class="hljs-selector-tag">div</span>&gt;<span class="hljs-selector-tag">div</span>&gt;<span class="hljs-selector-tag">div</span>&#123;<br>    <span class="hljs-attribute">color</span>: red;<br>&#125;<br><span class="hljs-comment">/*类选择器 10级 */</span><br><span class="hljs-selector-class">.div11</span>&#123;<br>    <span class="hljs-attribute">color</span>: blue;<br>&#125;<br>&lt;/style&gt;<br><br>&lt;<span class="hljs-selector-tag">body</span>&gt;<br>	    &lt;<span class="hljs-selector-tag">div</span>&gt;<br>        &lt;<span class="hljs-selector-tag">div</span>&gt;<br>            &lt;<span class="hljs-selector-tag">div</span>&gt;<br>                &lt;<span class="hljs-selector-tag">div</span>&gt;<br>                    &lt;<span class="hljs-selector-tag">div</span>&gt;<br>                        &lt;<span class="hljs-selector-tag">div</span>&gt;<br>                            &lt;<span class="hljs-selector-tag">div</span>&gt;<br>                                &lt;<span class="hljs-selector-tag">div</span>&gt;<br>                                    &lt;<span class="hljs-selector-tag">div</span>&gt;<br>                                        &lt;<span class="hljs-selector-tag">div</span>&gt;<br>                                            &lt;<span class="hljs-selector-tag">div</span> class=&quot;div11&quot; style=&quot;<span class="hljs-attribute">color</span>: coral;&quot;&gt;<span class="hljs-number">11</span>个<span class="hljs-selector-tag">div</span>嵌套											&lt;/<span class="hljs-selector-tag">div</span>&gt;<br>                                        &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>                                    &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>                                &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>                            &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>                        &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>                    &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>                &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>            &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>        &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>    &lt;/<span class="hljs-selector-tag">div</span>&gt;<br>&lt;/<span class="hljs-selector-tag">body</span>&gt;<br></code></pre></td></tr></table></figure>

<hr>
<h2 id="5-裁剪"><a href="#5-裁剪" class="headerlink" title="5.裁剪"></a>5.裁剪</h2><p>使用<code>clip-path</code>进行裁剪</p>
<h3 id="5-1裁剪矩形inset"><a href="#5-1裁剪矩形inset" class="headerlink" title="5.1裁剪矩形inset"></a>5.1裁剪矩形<code>inset</code></h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box3</span>&#123;<br>        <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>        <span class="hljs-attribute">background-color</span>: brown;<br>        <span class="hljs-comment">/* inset(上边，右边，下边，左边) */</span><br>        <span class="hljs-attribute">clip-path</span>:<span class="hljs-built_in">inset</span>(<span class="hljs-number">10px</span> <span class="hljs-number">10px</span> <span class="hljs-number">0</span> <span class="hljs-number">100px</span>);<br>        <span class="hljs-attribute">margin</span>: auto;<br>    &#125;<br><br><span class="hljs-comment">/* 裁剪带圆角的矩形 */</span><br>    <span class="hljs-selector-class">.box4</span>&#123;<br>        <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>        <span class="hljs-attribute">background-color</span>: brown;<br>        <span class="hljs-comment">/* inset(上边，右边，下边，左边 round 边框圆角) */</span><br>        <span class="hljs-attribute">clip-path</span>:<span class="hljs-built_in">inset</span>(<span class="hljs-number">10px</span> <span class="hljs-number">10px</span> <span class="hljs-number">0</span> <span class="hljs-number">100px</span> round <span class="hljs-number">10px</span>);<br>        <span class="hljs-attribute">margin</span>: auto;<br>    &#125;<br></code></pre></td></tr></table></figure>

<h3 id="5-2裁剪圆circle"><a href="#5-2裁剪圆circle" class="headerlink" title="5.2裁剪圆circle"></a>5.2裁剪圆<code>circle</code></h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 圆形裁剪 */</span><br>   <span class="hljs-selector-class">.box1</span>&#123;<br>       <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>       <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>       <span class="hljs-attribute">background-color</span>: brown;<br>       <span class="hljs-comment">/*半径 at 圆心坐标*/</span><br>       <span class="hljs-attribute">clip-path</span>: <span class="hljs-built_in">circle</span>(<span class="hljs-number">100px</span> at <span class="hljs-number">100px</span> <span class="hljs-number">100px</span>);<br>       <span class="hljs-attribute">margin</span>: auto;<br>   &#125;<br></code></pre></td></tr></table></figure>

<h3 id="5-3裁剪椭圆ellipse"><a href="#5-3裁剪椭圆ellipse" class="headerlink" title="5.3裁剪椭圆ellipse"></a>5.3裁剪椭圆<code>ellipse</code></h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 椭圆裁剪 */</span><br>     <span class="hljs-selector-class">.box2</span>&#123;<br>         <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>         <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>         <span class="hljs-attribute">background-color</span>: brown;<br>         <span class="hljs-comment">/* ellipse(横轴 纵轴 at 圆心坐标) */</span><br>         <span class="hljs-attribute">clip-path</span>: <span class="hljs-built_in">ellipse</span>(<span class="hljs-number">30px</span> <span class="hljs-number">100px</span> at <span class="hljs-number">100px</span> <span class="hljs-number">100px</span>);<br>         <span class="hljs-attribute">margin</span>: auto;<br>     &#125;<br></code></pre></td></tr></table></figure>

<h3 id="5-4裁剪多边形polygon"><a href="#5-4裁剪多边形polygon" class="headerlink" title="5.4裁剪多边形polygon"></a>5.4裁剪多边形<code>polygon</code></h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 裁剪多边形 三角形 棱形等其他不规则图片 */</span><br>     <span class="hljs-selector-class">.box5</span>&#123;<br>         <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;<br>         <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>         <span class="hljs-attribute">background-color</span>: brown;<br>         <span class="hljs-comment">/* polygon(x1 y1,x2 y2,x3 y3,x4 y4) */</span><br>         <span class="hljs-attribute">clip-path</span>: <span class="hljs-built_in">polygon</span>(<span class="hljs-number">50px</span> <span class="hljs-number">0</span>,<span class="hljs-number">100px</span> <span class="hljs-number">100px</span>,<span class="hljs-number">50px</span> <span class="hljs-number">200px</span>,<span class="hljs-number">0</span> <span class="hljs-number">100px</span>);<br>         <span class="hljs-attribute">margin</span>: auto;<br>     &#125;<br></code></pre></td></tr></table></figure>

<h3 id="5-5裁剪注意事项"><a href="#5-5裁剪注意事项" class="headerlink" title="5.5裁剪注意事项"></a>5.5裁剪注意事项</h3><ol>
<li><p><strong>裁剪是从边框开始裁剪</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box2</span>&#123;<br>         <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>         <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>         <span class="hljs-attribute">background-color</span>: sandybrown;<br>         <span class="hljs-attribute">border</span>: <span class="hljs-number">20px</span> solid black;<br>         <span class="hljs-comment">/* 使用inset裁剪矩形 上右 下左*/</span><br>         <span class="hljs-attribute">box-sizing</span>: border-box;<br>         <span class="hljs-attribute">clip-path</span>: <span class="hljs-built_in">inset</span>(<span class="hljs-number">15px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>);<br>     &#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/60f68f0e5132923bf83ac915.jpg" srcset="/blog/img/loading.gif" lazyload alt="剪掉部分边框"></p>
</li>
<li><p><strong>裁剪会<u>去掉所有外阴影</u>，而内阴影不会全部被去掉，只会被裁剪部分</strong></p>
</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 会裁剪掉所有外阴影 */</span><br>   <span class="hljs-selector-class">.box3</span>&#123;<br>       <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>       <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>       <span class="hljs-attribute">background-color</span>: sandybrown;<br>       <span class="hljs-comment">/* border: 20px solid black; */</span><br>       <span class="hljs-comment">/* 使用inset裁剪矩形 上右 下左*/</span><br>       <span class="hljs-attribute">clip-path</span>: <span class="hljs-built_in">inset</span>(<span class="hljs-number">15px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>);<br>       <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">20px</span> <span class="hljs-number">20px</span> black;<br>   &#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/60f68f3b5132923bf83b78a8.jpg" srcset="/blog/img/loading.gif" lazyload alt="去掉所有外阴影"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs css">   <span class="hljs-comment">/*内阴影只会被去掉一部分*/</span><br><span class="hljs-selector-class">.box4</span>&#123;<br>          <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>          <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>          <span class="hljs-attribute">background-color</span>: sandybrown;<br>          <span class="hljs-comment">/* border: 20px solid black; */</span><br>          <span class="hljs-comment">/* 使用inset裁剪矩形 上右 下左*/</span><br>          <span class="hljs-attribute">clip-path</span>: <span class="hljs-built_in">inset</span>(<span class="hljs-number">15px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>);<br>          <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">20px</span> <span class="hljs-number">20px</span> black inset;<br>      &#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/60f68f565132923bf83be8a8.jpg" srcset="/blog/img/loading.gif" lazyload alt="内阴影"></p>
<hr>
<h2 id="6-BFC"><a href="#6-BFC" class="headerlink" title="6.!!!BFC"></a>6.!!!BFC</h2><blockquote>
<p>BFC(block formatting context）块级格式化上下文：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 是<code>W3C</code>中<code>CSS2.1</code>规范中的一个概念。</p>
</blockquote>
<h3 id="6-1形成BFC的条件"><a href="#6-1形成BFC的条件" class="headerlink" title="6.1形成BFC的条件"></a>6.1形成BFC的条件</h3><ol>
<li><code>float:</code>除了<code>none</code>以外的。(<code>left</code>，<code>right</code>)</li>
<li><code>position:</code>为<code>absolute</code>或<code>fixed</code></li>
<li><code>display:</code>为下面中的值之一：<code>inline-block</code> ，<code> table-cell(表格单元格td)</code> ， <code>table-caption(表格标题)</code></li>
<li><code>overflow</code>除了<code>visible</code>以外的值（<code>hidden，auto，scroll</code>）</li>
<li>元素加上 <code>display:flow-root </code>(<strong>没有副作用</strong>，但是兼容性差。<code>display:flow-root</code>属性是CSS新增的属 性，专门用来触发BFC，不干别的。)</li>
<li> 元素加上<code>display:flex</code>弹性布局</li>
</ol>
<h3 id="6-2BFC常见作用"><a href="#6-2BFC常见作用" class="headerlink" title="6.2BFC常见作用"></a>6.2BFC常见作用</h3><ol>
<li>父元素包裹子元素</li>
<li>兄弟元素之间划清界限</li>
</ol>
<h3 id="6-3作用案例"><a href="#6-3作用案例" class="headerlink" title="6.3作用案例"></a>6.3作用案例</h3><ol>
<li><p>子元素浮动时高度坍塌，可以在父元素添加<code>overflow:auto</code>形成BFC，<strong>恢复高度</strong></p>
</li>
<li><p>哥哥元素左浮动，弟弟元素会上移动并重叠，哥哥元素会占据弟弟元素的内容空间</p>
<p><img src="https://pic.imgdb.cn/item/60f695ec5132923bf8540d58.jpg" srcset="/blog/img/loading.gif" lazyload alt="哥哥弟弟分离"></p>
<p><strong>这时给弟弟设置BFC即可使他们分离</strong></p>
</li>
<li><p>上下兄弟元素外边距折叠问题</p>
<p><img align="left" src="https://pic.imgdb.cn/item/60f696bb5132923bf856e36b.jpg" srcset="/blog/img/loading.gif" lazyload><img align="left" src="https://pic.imgdb.cn/item/60f697055132923bf857e9b3.jpg" srcset="/blog/img/loading.gif" lazyload></p>
<p><strong>解决：</strong>在两个兄弟元素外层都套一个父容器，并给父容器设置BFC，即可使外边距不折叠</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">      <span class="hljs-selector-class">.bfc</span> &#123;</span><br><span class="css">            <span class="hljs-comment">/* 官方解决方法 没有副作用 */</span></span><br><span class="css">             <span class="hljs-attribute">display</span>: flow-root;</span><br><span class="css">        &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bfc&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;div1&quot;</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bfc&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;div2&quot;</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>



</li>
</ol>
<h3 id="6-4总结"><a href="#6-4总结" class="headerlink" title="6.4总结"></a>6.4总结</h3><blockquote>
<p><strong>标哥说：</strong>不要试图去讲解 BFC 的定义！！ 如何说明 BFC ，举例子！！不要试图去讲定义！！</p>
</blockquote>
<hr>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/HTML/">HTML</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/CSS/">CSS</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/09/08/CSS%E7%AC%94%E8%AE%B0-3/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">CSS笔记-3</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/09/04/CSS%E7%AC%94%E8%AE%B0-1/">
                        <span class="hidden-mobile">CSS笔记-1</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
